<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    :action="action"
    :headers="headers"
    :show-file-list="false"
    :on-success="onSuccess"
    :on-change="onChange"
  >
    <template #trigger>
      <el-button type="primary" :disabled="disabled" size="small">导入</el-button>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import type { UploadInstance } from 'element-plus'
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})
const action = `${import.meta.env.VITE_APP_BASE_URL_LLY}/cloud/pbgl/pointInfo/importExcel`
const upload = ref<UploadInstance>()

const _useBasicStore = useBasicStore()
const headers = ref({
  Authorization: _useBasicStore.token
})

const emit = defineEmits(['uploadSuccess'])
const onSuccess = (response: any) => {
  const { data, message } = response
  if (message.code === '200') {
    emit('uploadSuccess', data)
  } else {
    ElMessage.error('上传失败')
  }
}

let uploadingIns: any = null //loading实例
const onChange = (uploadFile) => {
  const { percentage, response } = uploadFile
  if (response?.message?.code === '200') {
    if (percentage === 100) {
      uploadingIns?.close()
      ElMessage.success('上传成功')
    } else {
      uploadingIns = ElLoading.service({
        lock: true,
        fullscreen: true,
        text: '上传中...',
        background: 'rgba(0, 0, 0, 0.1)'
      })
    }
  }
}
</script>
<style scoped>
.upload-demo {
  margin: 0px 10px;
}
</style>
